import React, { useState } from 'react'
import { Input } from "antd"
import { Popup } from 'react-vant';
import { Button } from 'antd-mobile'
import { ArrowLeft, Location, Search, ArrowDown, FilterO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import '../css/list.css'
export default function List() {
    const nav = useNavigate()
    const type = [
        { id: 1, name: '排序', icon: <ArrowDown /> },
        { id: 2, name: '科室', icon: <ArrowDown /> },
        { id: 3, name: '疾病', icon: <ArrowDown /> },
        { id: 4, name: '筛选', icon: <FilterO /> },
    ]
    const [state, setState] = useState('')
    const onClose = () => setState('')
    const types = ['门诊预约', '互联网医院'] // 服务类型
    const grade = ['一级医院', '二级医院', '三级医院', '三甲医院'] // 医院等级
    const distance = ['5km内', '10km内', '20km内', '50km内']
    const hospital_type = ['综合医院', '儿童医院', '骨科医院', '妇产科医院', '扣将医院'] // 医院类型
    const [tname, setTname] = useState('')
    const [gname, setGname] = useState('')
    const [dname, setDname] = useState('')
    const [hname, setHname] = useState('')
    const [num1,setNum1]=useState(-1)
    const [num2,setNum2]=useState(-1)
    const [num3,setNum3]=useState(-1)
    const [num4,setNum4]=useState(-1)
    const junp = (name) => {
        if (name == '科室') {
            nav()
        } else if (name == '疾病') {
            nav()
        } else if (name == '筛选') {
            setState('right')
        }
    }

    return (
        <div>
            <div className='top'>
                <ArrowLeft />
                <Input size="large" suffix={<Search />} className='inp' />
                <Location className='position' />
            </div>
            <div className='cate'>
                {type.map(item => {
                    return <div key={item.id} className='type' onClick={() => junp(item.name)}>
                        <div>{item.name}</div>
                        <div style={{ float: 'right', marginTop: '-28px', marginRight: '10px' }}>{item.icon}</div>
                    </div>
                })}
            </div>
            <div className='content' onClick={()=>nav('/homes')}>
                <div className='img'>
                    <img src='/img/1.jpg' style={{ width: '80px', height: '80px' }}></img>
                </div>
                <div className='center'>
                    <div className='name'>北京协和医院</div>
                    <div className='address'>北京协和医院</div>
                    <div className='sort'>北京协和医院</div>
                </div>
                <div className='right'>
                    2.5km
                </div>
            </div>
            <div className='content' onClick={()=>nav('/homes')}>
                <div className='img'>
                    <img src='/img/1.jpg' style={{ width: '80px', height: '80px' }}></img>
                </div>
                <div className='center'>
                    <div className='name'>北京协和医院</div>
                    <div className='address'>北京协和医院</div>
                    <div className='sort'>北京协和医院</div>
                </div>
                <div className='right'>
                    2.5km
                </div>
            </div>
            <div className='content' onClick={()=>nav('/homes')}>
                <div className='img'>
                    <img src='/img/1.jpg' style={{ width: '80px', height: '80px' }}></img>
                </div>
                <div className='center'>
                    <div className='name'>北京协和医院</div>
                    <div className='address'>北京协和医院</div>
                    <div className='sort'>北京协和医院</div>
                </div>
                <div className='right'>
                    2.5km
                </div>
            </div>
            <Popup
                visible={state === 'right'}
                style={{ width: '56%', height: '100%', background: '' }}
                position='right'
                onClose={onClose}

            >
                <div className='popup'>
                    <h3>服务类型</h3>
                    {types.map((item, index) => {
                        return <div key={index} className={index==num1?'types1':'types'} onClick={()=>{setNum1(index),setTname(item)}}>{item}</div>
                    })}
                    <h3 className='h3'>医院等级</h3>
                    {grade.map((item, index) => {
                        return <div key={index} className={index==num2?'grade1':'grade'} onClick={()=>{setNum2(index),setGname(item)}}>{item}</div>
                    })}
                    <h3 className='h3_1'>距离</h3>
                    {distance.map((item, index) => {
                        return <div key={index} className={index==num3?'distance1':'distance'} onClick={()=>{setNum3(index),setDname(item)}}>{item}</div>
                    })}
                    <h3 className='h3_2'>医院类型</h3>
                    {hospital_type.map((item, index) => {
                        return <div key={index} className={index==num4?'hospital_type1':'hospital_type'} onClick={()=>{setNum4(index),setHname(item)}}>{item}</div>
                    })}
                    
                    <div className='bottom'>
                        <Button color='primary' fill='outline' className='but1' 
                        onClick={()=>{setDname(''),setGname(''),setHname(''),setHname('')
                                    setNum1(-1),setNum2(-1),setNum3(-1),setNum4(-1)
                        }}>
                            重置
                        </Button>
                        <Button color='primary' fill='solid' className='but2'>
                            确定
                        </Button>
                    </div>
                </div>
            </Popup>
        </div>
    )
}
